<template>
    <view class='page'>
        <u-navbar title="确认购买" :back-icon-color="'#ffffff'" :title-color="'#ffffff'"
            :background="background"></u-navbar>
        <view class="content">
            <view class="box1">
                <view class="evan-form-show">
                    <evan-form :hide-required-asterisk="hideRequiredAsterisk" ref="form" :model="form" :rules="rules">
                        <evan-form-item label="添加地址" prop="address" class="address">
                            <span class="p one-omit"
                                :class="{'gra':!form.address}">{{form.address?form.address:'请添加地址'}}</span>
                            <view class="addre" @click="selectAddress">
                                <image :src="$imgUrl+'service/edit.png'" mode="widthFix"></image>
                            </view>
                        </evan-form-item>
                        <evan-form-item label="服务名称" prop="service">
                            <span class="form-input">{{form.service}}</span>
                        </evan-form-item>
                        <evan-form-item label="折扣价格" prop="price">
                            <span class="form-input">{{form.price}}</span>
                            <!-- <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.price" placeholder="请输入折扣价格" /> -->
                        </evan-form-item>
                        <evan-form-item label="服务时长" prop="duration">
                            <span class="form-input">{{form.duration}}分钟</span>
                        </evan-form-item>
                        <evan-form-item label="服务日期" prop="service_data">
                            <datetimePicker type="datetime" :start="start" v-model="form.service_data"
                                @change="changeLog" />
                        </evan-form-item>
                        <evan-form-item label="服务人员性别" prop="sex" class="fw">
                            <view></view>
                            <radio-group class="block" v-model="form.service_sex">
                                <label v-for="item,index in sexList" :key="index" @click="radioChange(item.value)">
                                    <radio :checked="radio==item.value" :value="item.value" color="#2d996c;">
                                    </radio>
                                    <text class="p">
                                        {{item.value }}
                                    </text>
                                </label>
                            </radio-group>
                        </evan-form-item>
                        <evan-form-item label="备注" prop="service_tips"></evan-form-item>
                        <view class="feedback-data">
                            <view class="service_tips">
                                <textarea v-model="form.service_tips" placeholder="请输入备注"></textarea>
                            </view>
                        </view>
                    </evan-form>
                </view>
                <view class="btn">
                    <view class="padding flex flex-direction">
                        <button :disabled="disabled" @click="submit()"
                            class="cu-btn bg-blue margin-tb-sm lg">提交</button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        appionSubmit
    } from "@/api/service.js"
    import datetimePicker from "@/pagesA/components/datetime-picker/components/datetime-picker/time-picker.vue"
    export default {
        components: {
            datetimePicker
        },
        data() {
            return {
                hideRequiredAsterisk: true,
                disabled: false,
                form: {
                    address: '',
                    address_id: '',
                    service: '',
                    service_id: '',
                    service_sex: 0,
                    service_data: "",
                    service_time: '',
                },
                rules: {
                    address: {
                        required: true,
                        message: '请添加地址'
                    },
                    service_data: {
                        required: true,
                        message: '请选择服务日期'
                    },
                },
                radio: "",
                sexList: [{
                    value: '男',
                    checked: false
                }, {
                    value: '女',
                    checked: false
                }],
                selectData: {},
                start: Date.now() + 0.5 * 3600 * 1000,
                $imgUrl: this.$imgUrl,
                background: {
                    // 渐变色
                    backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
                },
            };
        },
        onLoad(query) {
            if (query) {
                let data = JSON.parse(decodeURIComponent(query.data))
                console.log(data, "datadatadatadatadatadata")
                this.form.service = data.name
                this.form.service_id = data.id
                this.form.price = data.current_price
                this.form.duration = data.service_duration
                if (data.address) {
                    console.log(data.address)
                    this.form.address = data.address.province + data.address.city + data.address.area + data.address
                        .detailed
                    this.form.address_id = data.address.id
                }
            }
            this.$bus.$on('addAddress', this.addAddress)
            // uni.$on('add', (res) => {
            //     this.selectData = res.listData
            //     this.form.address = this.selectData.province + this.selectData.city + this.selectData.area + this
            //         .selectData.detailed
            //     this.form.address_id = this.selectData.id
            // })
        },
        onUnload() {
            uni.$off('addAddress')
        },
        onShow() {
            this.form.service_data = Date.now() + 0.5 * 3600 * 1000
            this.getCurrentTime()
        },
        mounted() {
            this.$refs.form.setRules(this.rules)
        },
        methods: {
            getCurrentTime() {
                let begin_time = new Date();
                let end_time = new Date(begin_time.getTime() + 1000 * 60 * 30);
                console.log(end_time)
                //获取当前时间并打印
                let yy = new Date().getFullYear();
                let mm = (new Date().getMonth() + 1) < 10 ? "0" + (new Date().getMonth() + 1) : (new Date().getMonth() +
                    1);
                let dd = new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
                let H;
                let min = mf + 30
                if (min > 59) {
                    H = (hh + 1) < 10 ? "0" + (hh + 1) : (hh + 1)
                    min = (min - 60) < 10 ? "0" + (min - 60) : (min - 60)
                } else {
                    H = hh < 10 ? "0" + hh : hh
                    min = min < 10 ? "0" + min : min
                }
                this.form.service_time = yy + "-" + mm + "-" + dd + ' ' + H + ':' + min + ':' + ss;
                console.log(this.form.service_time, 7)
            },
            addAddress(val) {
                this.selectData = val
                this.form.address = this.selectData.province + this.selectData.city + this.selectData.area + this
                    .selectData.detailed
                this.form.address_id = this.selectData.id
            },
            selectAddress() {
                uni.navigateTo({
                    url: "/pagesA/my/addressList?type=selectedPath"
                })
            },
            changeLog(e) {
                this.form.service_time = e
            },
            radioChange(name) {
                if (this.radio == name) { // 如果已经选中，则取消选中
                    this.radio = null
                    this.form.service_sex = 0
                    console.log(this.form.service_sex, '性别')
                } else { // 否则进行选中赋值
                    this.radio = name
                    if (this.radio == '男') {
                        this.form.service_sex = 1
                    } else if (this.radio == '女') {
                        this.form.service_sex = 2
                    }
                    console.log(this.form.service_sex, '性别')
                }
            },
            // 提交
            submit() {
                this.$refs.form.validate((val) => {
                    if (val) {
                        let json = {
                            address_id: this.form.address_id,
                            service_time: this.form.service_time,
                            service_sex: this.form.service_sex,
                            service_tips: this.form.service_tips,
                            service_id: this.form.service_id
                        }
                        appionSubmit(json).then((res) => {
                            if (res.code == 1) {
                                this.$message("操作成功")
                                setTimeout(() => {
                                    // uni.navigateTo({
                                    //     url: '/pages/pay/cashierDesk'
                                    // })
                                    let data = {
                                        ...res.data,
                                        ...{
                                            pageType: 3
                                        }
                                    }
                                    uni.navigateTo({
                                        url: '/pagesA/mall/cashierDesk?dataList=' +
                                            encodeURIComponent(JSON.stringify(data))
                                    })
                                }, 1000)
                            }
                        })
                    }
                })
            },
        },
    };
</script>
<style scoped lang='scss'>
    .page {
        background-color: #fff;
        height: 100vh;

        //   overflow: hidden;
        .content {
            .box1 {
                width: 100vw;
                //   min-height: 100vh;
                background-color: #fff;
                padding-bottom: 20rpx;

                .evan-form-show {
                    padding: 0 30rpx;
                    background-color: #fff;

                    .addre {
                        padding: 20rpx;
                    }

                    .form-input {
                        font-size: 28rpx;
                        color: #333;
                        // text-align: right;
                        text-align: left;
                        width: 100%;
                        box-sizing: border-box;
                        height: 60rpx;
                        line-height: 45rpx;
                        //   text-indent: 36rpx;
                        padding-left: 36rpx;

                        &.textarea {
                            height: 240rpx;
                            padding: 24rpx 0;
                            text-align: left;
                        }
                    }

                    .form-input-placeholder {
                        font-size: 28rpx;
                        color: #999;
                    }

                    &__button {
                        width: 100%;
                        height: 88rpx;
                        border-radius: 8rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0;
                        font-size: 36rpx;
                        color: #fff;
                        margin-top: 20rpx;
                        background-color: #2d87d5;

                        &::before,
                        &::after {
                            border: none;
                        }
                    }

                    .gray {
                        color: #999;
                    }

                    /deep/.evan-form-item-container {
                        border-bottom: 0;
                    }

                    .address {
                        .p {
                            padding-left: 34rpx;
                        }

                        .gra {
                            color: #999;
                        }

                        /deep/.evan-form-item-container {
                            border-bottom: 1rpx solid #eee;

                            .evan-form-item-container__main {
                                justify-content: space-between;

                                image {
                                    width: 38rpx;
                                }
                            }
                        }
                    }

                    .fw {
                        /deep/.evan-form-item-container__main {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            label {
                                margin-left: 20rpx;

                                text {
                                    padding-left: 20rpx;
                                    line-height: 90rpx;
                                }
                            }
                        }
                    }

                    .feedback-data {
                        // height: 600rpx;
                        margin: 20rpx auto;
                        background-color: #ffffff;
                        border-radius: 20rpx;

                        .content {
                            textarea {
                                width: 100%;
                                height: 270rpx;
                                border: solid 1px #a2a1a2;
                                border-radius: 15rpx;
                                padding: 20rpx;
                                font-size: 26rpx;
                                color: #222222;
                            }
                        }

                        .voucher-img {
                            display: flex;
                            align-items: center;
                            padding: 0 20rpx;
                            height: 240rpx;
                            margin-top: 20rpx;

                            .list {
                                width: 33%;
                                height: 100%;

                                image {
                                    width: 160rpx;
                                    height: 160rpx;
                                    border-radius: 10rpx;
                                }
                            }
                        }
                    }
                }

                /deep/.uni-date {
                    flex: 1;
                    line-height: 45rpx;
                    padding-left: 30rpx;

                    .uni-input {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }

                    .gray {
                        color: #999;
                    }
                }

                /deep/.evan-form-item-container__label {
                    font-size: 28rpx;
                    color: #333333;
                    min-width: 140rpx;
                    text-align: justify;
                    text-align-last: justify;
                }

                /deep/.uni-datetime-picker-timebox-pointer {
                    min-width: 400rpx;
                }

                /deep/.uni-datetime-picker-timebox {
                    height: 60rpx;
                    margin-left: 20rpx;

                    .uni-datetime-picker-text {
                        line-height: 30rpx;
                    }
                }

                .btn {
                    button {
                        background-image: linear-gradient(0deg, #4199b2 0%, #2d996b 100%),
                            linear-gradient(#ff6a00, #ff6a00);
                        background-blend-mode: normal, normal;
                    }
                }
            }
        }
    }
</style>